<!DOCTYPE html>

<html>
<head>
<title>tuiki 0.1 [alpha]</title>
<meta name="keywords" content="tuiki, wiki, google gears" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.0/build/reset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.0/build/fonts/fonts-min.css" />

<style type="text/css">
#hd {margin-top:10px;margin-bottom:10px}
#bd {margin-bottom:10px;margin-top:10px}
#ft {font-size:90%;font-family:georgia;margin-top:10px;margin-left:10px}
h2 {font-size:1.4em}
.title {font-weight:bold;font-size:1.1em}
div {margin-bottom:10px}
em {font-style:italic}
a {text-decoration:none}
a:hover {text-decoration:underline}
form {margin-bottom:10px}
small {font-size:75%;color:#AAA}
p {margin-left:5px}
</style>

<script type="text/javascript">
function toggle(obj){var el=document.getElementById(obj);if(el.style.display!='none'){el.style.display='none'}else{el.style.display=''}}
function ga(){var a=new Object();var b=location.search.substring(1);var c=b.split("&");for(var i=0;i<c.length;i++){var d=c[i].indexOf('=');if(d==-1)continue;var e=c[i].substring(0,d);var f=c[i].substring(d+1);a[e]=unescape(f)}return a}
</script>
</head>

<body>
<h2 id="hd"><a href="index.html">tuiki</a> 0.1 - rev 0</h2>

<div id="inizio"><a href="?art=main">Reach or create "main" article</a></div>

<span id="formarticle">
<form onsubmit="handleSubmit(); return false;">
  <table>
    <tr>
      <td valign="middle">Title: <input type="text" id="submitValueT"
        style="width:20em;"></td>
    </tr><tr>
      <td valign="middle"><textarea id="submitValueB"
        style="width:30em;"></textarea></td>
    </tr><tr>
      <td valign="middle"><input type="submit" value="Go"></td>
    </tr>
  </table>
</form>
</span>

<p><span id="article">&nbsp;</span>
<br>
<span id="edit"><button onclick="editArticle()">Edit</button></span></p>

<div id="ft">Offline (proof of concept) personal wiki (un)designed and developed by Andrea Baresi - rev 0 - powered by Google Gears and YUI</div>

<script type="text/javascript"  src="gears_init.js"></script>
<script type="text/javascript" src="sample.js"></script>
<script type="text/javascript">
<!--
var db;
init();

function init() {
  if (!window.google || !google.gears) {
    return;
  }

  try {
    db = google.gears.factory.create('beta.database', '1.0');
  } catch (ex) {
    setError('Could not create database: ' + ex.message);
  }

  if (db) {
    db.open('database-tuiki');
    db.execute('create table if not exists articles' +
               ' (title varchar(255), name varchar(255), body text, timestamp int)');
  }

  var init_succeeded = !!db;
  var inputs = document.getElementsByTagName('input');
  for (var i = 0, el; el = inputs[i]; i++) {
    el.disabled = !init_succeeded;
  }

  var a = ga();
  art = '';
  if (a.art) art = a.art;

  toggle('edit');
  toggle('inizio');
  toggle('formarticle');

  if (art != '') {
    try {
      var rs = db.execute("select * from articles where name='" + art + "'");
      if (rs.isValidRow()) {
        title = rs.field(0);
        body = rs.field(2);
        fa();
        toggle('edit');
      } else {
        var elm = document.getElementById('submitValueT');
        elm.value = art;
        toggle('formarticle');
      }
    rs.close();

    } catch (e) {
    throw new Error(e.message);
    }
  } else {
    toggle('inizio');
    displayRecentArticles();
  }

  edit = false;
}

function fa() {
    var article = document.getElementById('article');
    inner = ''
    inner += '<h3 class="title">' + title + '</h3>';
    inner += '<br>' + body;
    article.innerHTML = inner;
}

function re() {
    var elm = document.getElementById('newa');
    window.location = '?art=' + elm.value;
}

function editArticle() {
  edit = true;
  var elm = document.getElementById('submitValueT');
  elm.value = title;
  elm = document.getElementById('submitValueB');
  elm.value = body;
  toggle('formarticle');
  toggle('edit');
}

function handleSubmit() {
  if (!google.gears.factory || !db) {
    return;
  }

  var elm = document.getElementById('submitValueT');
  title = elm.value;
  elm.value = '';
  elm = document.getElementById('submitValueB');
  body = elm.value;
  elm.value = '';

  var currTime = new Date().getTime();

  if (!edit) {
    db.execute('insert into articles values (?, ?, ?, ?)', [title, art, body, currTime]);
    toggle('formarticle');
    toggle('edit');
    fa();
  } else {
    db.execute("update articles set title=?, body=?, timestamp=? where name=?", [title, body, currTime, art]);
    toggle('formarticle');
    toggle('edit');
    fa();
    edit = false;
  }
  // displayRecentArticles();
}


function displayRecentArticles() {
  var recentArticles = ['', '', '', '', '', '', '', '', '', ''];

  try {
    var rs = db.execute('select * from articles order by timestamp desc');
    var index = 0;
    while (rs.isValidRow()) {
      if (index < 10) {
        recentArticles[index] = '<a href="?art=' + rs.field(1) + '">' + rs.field(0) + '</a>';
      } else {
        break;
      }
      ++index;
      rs.next();
    }
    rs.close();

  } catch (e) {
    throw new Error(e.message);
  }

  var article = document.getElementById('article');
  var body = 'Recently modified articles:<br><br>';
  for (var i = 0; i < recentArticles.length; ++i) {
    var bullet = '(' + (i + 1) + ') ';
    body += bullet;
    body += recentArticles[i];
    body += '<br>';
  }
  body += '<br>Article <input type="text" id="newa" /><button onclick="re()">Add</button></span><br>'
  article.innerHTML = body;
}
//-->
</script>
</body>
</html>
